<template>
  <div class="palte-body">
    <div>
    <p>用户第一车牌号码：</p>
    <el-input placeholder="请输入内容" v-model="plate1" clearable></el-input>
    <p>用户第二车牌号码：</p>
    <el-input placeholder="请输入内容" v-model="plate2" clearable></el-input>
    <p>用户第三车牌号码：</p>
    <el-input placeholder="请输入内容" v-model="plate3" clearable></el-input>
    <el-button type="primary" @click="changePlate" class="change">确认修改</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      plate1:'',
      plate2:'',
      plate3:''
    }
  },


  methods:{
    async changePlate(){
      var res = this.$http.post('user/updataPlateNumber',{
        userAccount : window.sessionStorage.getItem('userAccount'),
        plateNumber1: this.plate1,
        plateNumber2: this.plate2,
        plateNumber3: this.plate3,
      })
      res.then((result)=>{
        if(result.data.status === 0){
          this.$message({
            message:'车牌号码信息更新成功！',
            type:'success'
          })
        }else{
          this.$message.error({
            message : result.data.message
          })
        }
      })
    }
  },

  created:async function(){
    const res = await this.$http.post('user/userPlate',{
      userAccount : window.sessionStorage.getItem('userAccount'),
    })

    this.plate1 = res.data.plateNumber1
    this.plate2 = res.data.plateNumber2
    this.plate3 = res.data.plateNumber3
  }
}
</script>

<style>
.palte-body{
  width: 80%;
  height: 80%;
  background-color: white;
  margin-left:120px;
  margin-top: 80px;

  opacity: 1;
  border-radius : 20px;
}

.palte-body>div>p{
  font-size: 20px;
  margin-top: 50px;
}

.palte-body>div{
  width: 500px;
  margin-left: 300px;
  padding-top:100px;
}

</style>